<template>
	<view v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'排行榜'}"></header-top>
		<view class="topbgc">
			<view class="tabtags">
				<view class="flexcolumn" :class="item.id==type?'focus':'nofocus'" v-for="item in tabs" :key="item.id"
					@click="changetab(item.id)">
					<view>{{item.name}}</view>
					<view :class="item.id==type?'noline':'outline'" class="outline"></view>
				</view>
			</view>
		</view>
		<view class="mainpadding" style="box-sizing: border-box;">
			<view class="flexbetween ffffff radius paiming123">
				<view class="flexcolumn radius item123">
					<view class="img123">
						<image :src="topList[1].avatar_text" mode=""></image>
					</view>
					<view class="strongtext margin_top2 textcenter">{{topList[1].username_text}}</view>
					<view class="flexcenter margin_top2">
						<u-icon name="red-packet-fill" color="#ff0000" size="20"></u-icon>
						<view class="nostrongtext xiankuan">{{topList[1].moneylog_sum}}</view>
					</view>
					<view class="pmimg">
						<image src="../../static/imags/mainrank/num2.png" mode=""></image>
					</view>
				</view>
				<view class="flexcolumn radius one item123">
					<view class="img123">
						<image :src="topList[0].avatar_text" mode=""></image>
					</view>
					<view class="strongtext margin_top2 textcenter">{{topList[0].username_text}}</view>
					<view class="flexcenter margin_top2">
						<u-icon name="red-packet-fill" color="#ff0000" size="20"></u-icon>
						<view class="nostrongtext xiankuan">{{topList[0].moneylog_sum}}</view>
					</view>
					<view class="pmimg">
						<image src="../../static/imags/mainrank/num1.png" mode=""></image>
					</view>
				</view>
				<view class="flexcolumn radius item123">
					<view class="img123">
						<image :src="topList[2].avatar_text" mode=""></image>
					</view>
					<view class="strongtext margin_top2 textcenter">{{topList[2].username_text}}</view>
					<view class="flexcenter margin_top2">
						<u-icon name="red-packet-fill" color="#ff0000" size="20"></u-icon>
						<view class="nostrongtext xiankuan">{{topList[2].moneylog_sum}}</view>
					</view>
					<view class="pmimg">
						<image src="../../static/imags/mainrank/num3.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding bottommsg">
			<view class="mainpadding itemline paiming123" v-for="(item,index) in bottomList" :key="item.id">
				<view class="flexbetween">
					<view class="flexleft">
						<view class="strongtext margin_right6">{{index+1}}</view>
						<view class="headimg margin_right">
							<image :src="item.avatar_text" mode=""></image>
						</view>
						<view class="strongtext">{{item.username_text}}</view>
					</view>
					<view class="flexright">
						<view class="margin_right1">
							<u-icon name="red-packet-fill" color="#ff0000" size="20"></u-icon>
						</view>
						<view class="nostrongtext">{{item.moneylog_sum}}</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				page: 1,
				limit: 12,
				type: 1, //总收入排名 1全国2全省3全市
				tabs: [{
						id: 1,
						name: "全国",
					},
					{
						id: 2,
						name: "全省",
					},
					{
						id: 3,
						name: "全市",
					}
				],
				list: {
					data: []
				},
				topList: [], //排名前三
				bottomList: [],
				pageShow:false
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			changetab(id) {
				this.type = id
				this.init()
			},
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/employeesapi/user/sfRangList', 'GET', {
					page: page || 1,
					limit: this.limit,
					type: this.type,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							// this.count = resList.count
							_this.list.data = dataList.data.concat(resList.data);
							_this.topList = _this.list.data.slice(0, 3)
							// _this.bottomList = _this.list.data.slice(3)
							_this.bottomList = _this.list.data
						} else {
							// this.count = resList.count
							_this.list = res.data
							_this.list.data = resList.data;
							_this.topList = _this.list.data.slice(0, 3)
							// _this.bottomList = _this.list.data.slice(3)
							_this.bottomList = _this.list.data
							console.log(_this.topList, '22')
						}
						_this.pageShow=true
					}
				}).catch(err => {
					// httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				console.log(list)
				if (list.last_page <= page) {
					console.log(9999999999999999999)
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.radius {
		border-radius: 10rpx;
	}

	.bottommsg {
		position: relative;
		top: -200rpx;
	}

	.item123 {
		padding: 50rpx 20rpx 50rpx;
		position: relative;
	}

	.pmimg {

		position: absolute;
		top: 0;
		right: 0;
		transform: translate(-50%, 50%);
		width: 40rpx;
		height: 50rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.one {
		position: relative;
		top: 50%;
		left: 0;
		transform: translate(0, -15%);
		background-color: #fff;
		box-shadow: 0px 15px 20px 0px rgba(1, 1, 1, 0.1);
	}

	.topbgc {
		padding: 30rpx;
		background-color: #3476fe;
		height: 400rpx;
	}

	.focus {
		color: #fff;
	}

	.nofocus {
		color: #a1a1a1;
	}

	.img123 {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}

	.paiming123 {
		position: relative;
		top: 50%;
		left: 0;
		transform: translate(0, -80%);
	}
	.textcenter{
		text-align: center;
	}
	.xiankuan {
		width: 130rpx;
		word-break: break-all;
		text-align: center;
	}

	.margin_top2 {
		margin-top: 20rpx;
	}

	.strongtext {
		font-weight: 900;
		font-size: 32rpx;
	}

	.nostrongtext {
		font-size: 28rpx;
		color: #666;
	}

	.itemline {
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
	}

	.headimg {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;

		image {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
		}
	}

	.margin_right {
		margin-right: 20rpx;
	}

	.margin_right6 {
		margin-right: 60rpx;
	}

	.margin_right1 {
		margin-right: 10rpx;
	}
</style>